﻿<section>
    <!--<h2 class="page-title" data-bind="text: title"></h2>-->
    <h1>Enter the network you wish to subnet</h1>
    <br />
    <form>
        <fieldset>
            <legend></legend>
            <label>Network Address:</label>
            <input class="input-medium" type="text" id="txtNetwork" placeholder="Enter address." />
            <span class="help-block"></span>
            <label>Mask Bits:</label>
            <input class="input-medium" type="number" id="txtMask" placeholder="Enter Mask bits." />
            <span class="help-block"></span>
            <button type="submit" class="btn btn-primary" data-bind="click: generate">Generate</button>
            <button type="reset" class="btn" data-bind="click: reset">Reset</button>
            <button type="submit" class="btn" data-bind="click: save">Save</button>
        </fieldset>
    </form>
    <hr />
    <table class="table table-bordered">
        <thead>
            <tr class="info">
                <td>Subnet address</td>
                <td>Netmask</td>
                <td>Range of addresses</td>
                <td>Useable IPs</td>
                <td>Hosts</td>
            </tr>
        </thead>
        <tbody id="calcbody" data-bind="foreach: objects">
            <tr>
                <td data-bind="text: address"></td>
                <td data-bind="text: netmask"></td>
                <td data-bind="text: range"></td>
                <td data-bind="text: useableips"></td>
                <td data-bind="text: hosts"></td>
            </tr>
        </tbody>
    </table>
</section>
